<template>
	<tm-drawer v-model:show="show" :showTitle="false" closeable size="80%" showFooter>
		<view class="py-24 fd-r">
			<image
				class="w-160"
				:src="currentSku.img"
				mode="widthFix"
				@click="HPreview(currentSku.img)"
			></image>

			<view class="flex1 pl-24 fd-c">
				<view class="fd-r c-red">
					<text class="fs-24">￥</text>
					<text class="fs-28 fw-b">
						{{ currentSku.price }}
					</text>
				</view>
				<text class="py-12 fs-28">已选：{{ currentSku.name }}</text>
				<tm-stepper
					v-model="count"
					btnColor="primary"
					:step="1"
					width="200rpx"
					:min="1"
					:max="currentSku.stock"
					:splitBtn="true"
				></tm-stepper>
			</view>
		</view>
		<view class="pb-16" v-for="(spec, idx1) in specList2" :key="idx1">
			<text class="fs-28">{{ spec.label }}：</text>
			<view class="fd-r fw-w">
				<view
					v-for="(item, idx2) in spec.value"
					:key="idx2"
					class="mr-16"
					@click="HSkuChange(idx1, idx2)"
				>
					<button class="btn-tag" v-if="item.disabled">
						{{ item.label }}
					</button>
					<block v-else>
						<button
							class="btn-tag"
							:class="[
								item.checked ? 'btn-red-plain' : 'btn-grey'
							]"
						>
							{{ item.label }}
						</button>
					</block>
				</view>
			</view>
		</view>

		<template #footer>
			<view class="">
				<button class="btn-red fs-28" @click="HAdd">确定</button>
			</view>
		</template>

	</tm-drawer>
</template>

<script setup>
import { ref } from 'vue';

import { storeToRefs } from 'pinia';
import { useGoodStore } from './store.js';
const goodStore = useGoodStore();
const { detail, currentSku, specList, skuList } = storeToRefs(goodStore);

const show = ref(false);
const count = ref(1); // 商品数量
let type = 'add';
const checkData = {
	spec1: null,
	spec2: null,
	spec3: null
};
const specList2 = ref([]);
const open = (str) => {
	type = str;
	// 保存specName
	checkData.spec1 = currentSku.value.spec[0].value;
	checkData.spec2 = currentSku.value.spec[1]?.value;
	checkData.spec3 = currentSku.value.spec[2]?.value;
	// 复制一份
	specList2.value = uni.$tm.u.deepClone(specList.value);
	console.log('specList2.value', specList2.value);
	// 去除用不到的tag
	HFilterSpec();
	show.value = true;
};

const HFilterSpec = () => {
	// if (specList2.value.length == 1) {
	// 	HFilterSpec1();
	// }
	// if (specList2.value.length == 2) {
	// 	HFilterSpec2();
	// }

	// 设置checked
	HSetChecked();
};

const HFilterSpec1 = () => {
	const arr = skuList.value.map((v) => v.name);
	const children = specList2.value[0].value.filter((v) =>
		arr.includes(v.label)
	);
	specList2.value[0].children = children;
};

const HFilterSpec2 = () => {
	const arr = uni.$tm.u.deepClone(specList.value);
	// 生成第一级数据
	let ids = skuList.value.map((v) => v.spec1Id2);
	let children = arr[0].children.filter((v) => ids.includes(v.uid));
	specList2.value[0].children = children;
	// 生成第二级数据
	console.log('HFilterSpec2', currentSku.value);
	ids = skuList.value
		.filter((v) => v.spec1Id2 == currentSku.value.spec1Id2)
		.map((v) => v.spec2Id2);
	children = arr[1].children.filter((v) => ids.includes(v.uid));
	specList2.value[1].children = children;
};

const HSetChecked = () => {
	specList2.value[0].value.forEach((v, idx) => {
		if (currentSku.value.name.includes(v.label)) {
			v.checked = true;
		}
	});
	// 如果存在2级
	if (specList2.value[1]) {
		specList2.value[1].value.forEach((v, idx) => {
			if (currentSku.value.name.includes(v.label)) {
				v.checked = true;
			}
		});
	}
};

const HSkuChange = (idx1, idx2) => {
	const item = specList2.value[idx1].value[idx2];
	
	if (item.disabled) {
		return;
	}
	
	if(item.checked) {
		item.checked = false
	} else {
		specList2.value[idx1].value.forEach(v => {
			v.checked = false
		})
		item.checked = true
		
		if(idx1 === 0) {
			checkData.spec1 = item.label;
		}
		if(idx1 === 1) {
			checkData.spec2 = item.label;
		}
		if(idx1 === 2) {
			checkData.spec3 = item.label;
		}
		
		let name = checkData.spec1
		if(specList2.value.length === 2) {
			name = `${name},${checkData.spec2}`
		}
		if(specList2.value.length === 3) {
			name = `${name},${checkData.spec3}`
		}
		const sku = skuList.value.find(v => v.name === name)
		if(sku) {
			currentSku.value = sku
		}
	}
	
	// HFilterSpec();
};

const HPreview = (url) => {
	uni.previewImage({
		urls: [url]
	});
};

import { useCartStore } from '@/store/cart.js';
const cartStore = useCartStore();
const HAdd = () => {
	const params = {
		goodId: currentSku.value.goodId,
		skuId: currentSku.value.id,
		price: currentSku.value.price,
		quantity: count.value
	};
	cartStore.addCart(params);
	show.value = false;
};

defineExpose({ open }); // 暴露open方法给父组件调用
</script>

<style scoped>
.btn-tag {
	height: 52rpx;
	font-size: 22rpx;
	line-height: 48rpx;
	border-radius: 30rpx;
	padding: 0 40rpx;
	margin-top: 16rpx;
}

.btn-grey {
	background-color: #f5f5f5;
	color: #333;
}
</style>
